<template>
  <div class="home">
    <!-- 轮播图组件 -->
    <slide :img="slide" />
    <!-- 下拉框 -->
    <div class="home_nav" ref="home_nav">
      <!-- 内容 -->
      <div class="content">
        <ul>
          <li v-for="item in icons" :key="item.lable" :class="item.class">
            <a href="javascript:;">
               <i></i>
               <p>{{item.lable}}</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 收起 -->
      <div class="icon" @click="clickIcon">
        <i :class="out ? '' : 'rotate' "></i>
        <span>{{text}}</span>
      </div>
    </div>
    <!-- 新闻资讯 -->
    <card icon="mdi-menu" title="新闻资讯" details="articles">
      <slideList :title="article_title"></slideList>
    </card>
    <!-- 英雄列表 -->
    <card icon="mdi-one-up" title="英雄列表"  details="heros"/>

    <!-- 精彩视频 -->
    <card icon="mdi-play-box" title="精彩视频" />
  </div>
</template>

<script>
// 轮播图组件
import slide from '~/components/slide.vue';
// 卡片组件
import card from '~/components/card.vue';
// 轮播组件
import slideList from '~/components/slideList.vue';

export default {
  comment: {
    slide,
    card,
    slideList
  },
  data () {
    return {
      // 下拉框的开关标识
      out: false,
      // 下拉框的渲染数据
      icons: [
        { class: '', lable: '爆料站' },
        { class: 'gsz', lable: '故事站' },
        { class: 'zbsc', lable: '周边商城' },
        { class: 'tyf', lable: '体验服' },
        { class: 'xrzq', lable: '新入专区' },
        { class: 'cc', lable: '荣耀·传承' },
        { class: 'wzyd', lable: '王者营地' },
        { class: 'gzh', lable: '公众号' },
        { class: 'bbjs', lable: '版本介绍' },
        { class: 'djhj', lable: '对局环境' },
        { class: 'jih', lable: '计划' },
        { class: 'cyy', lable: '创意营' },
      ],
      text: '展开',
      newData: [
        { talbe: '最新' }
      ],
      article_title: ['热门', '日常', '公告', '活动', '赛事'],
    }
  },
  methods: {
    // 点击收起触发
    clickIcon () {
      if (!this.out) {
        this.$refs.home_nav.style.height =  6.52 + 'rem';
        this.out = true;
        this.text = '收起';
      } else {
        this.$refs.home_nav.style.height =  2.5 + 'rem';
        this.out = false;
        this.text = '展开';
      }
    },
  },
  async asyncData({ $axios }) {
    const {data} = await $axios.get('slides/index');

    const newData = data.map((item, i) => {
      return {
        icon: item.img,
        href: item.article_id._id
      }
    })
    return { slide: newData }
  }
}
</script>

<style lang="scss" scoped>
@import '~/assets/style/global.scss';

.home {
  height: 3000px;
  .home_nav {
    position: relative;
    margin-top: .3rem;
    height: 2.7rem;
    background-color: #fff;
    overflow: hidden;
    transition: all 1s ease;
    // 内容区
    .content {
      position: absolute;
      top: 7px;
      width: 100%;
      height: 88%;
      ul {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        li {
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 25%;
          height: 1.86rem;
          margin: .05rem 0;
          font-size: $max-fs;
          a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            border-right: 1px solid #d4d9de;
          }
          &:nth-child(4n) {
            a {
               border-right: 0px solid #e7e7e7;
            }
          }
          i {
            display: inline-block;
            width: 23px;
            height: 20px;
            margin-bottom: .1rem;
            background: url('~/assets/img/icon.png') no-repeat 63.546% 15.517%;
            background-size: 375px 455px;
          }
        }
      }
    }
    // 收起区
    .icon {
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: .6rem;
      font-size: $min-fs;
      background-color: #f9f9f9;
      i {
        display: inline-block;
        background: url(~/assets/img/icon.png) no-repeat 38.577% 52.076%;
        background-size: 375px 455px;
        width: 10px;
        height: 10px;
        margin-right: .1rem;
        transition: all 1s ease;
      }
      span {
        opacity: .5;
      }
    }

  }
  // 展开 收起图标
  .rotate{
    transform: rotate(180deg);
  }
  // 新闻资讯

}

</style>
